Serraniel / AniwatchPlus

import * as core from '../utils/aniwatchCore';

import * as helper from '../utils/helpers';

const quickSearchID = 'ea-quickSearch';

const quickSearchLink = 'ea-quickSearchLink';

    });

}

function initSearch(): void {

    let entry = document.createElement('li');

    entry.setAttribute('ng-repeat', 'item in navbar');

    entry.setAttribute('ng-class', '{\'anime-indicator\': item[\'@attributes\'].title==\'Anime\'}');

    let quickSearchElement = document.createElement('input');

    quickSearchElement.setAttribute('aria-label', 'Quick Search Input');

    quickSearchElement.setAttribute('ng-model-options', '{debounce: 500}');

    quickSearchElement.type = 'text';

    quickSearchElement.classList.add('ng-pristine', 'ng-valid', 'ng-empty', 'ng-touched');

    quickSearchElement.placeholder = 'Quick Search (Shift + F)';

    quickSearchElement.id = quickSearchID;

    // register Enter keybinding

    quickSearchElement.addEventListener('keypress', event => handleQuickSearch(event));

    entry.appendChild(quickSearchElement);

    // Aniwatch CSS requires the search input to be in some kind of known menu container

    let linkElement = document.createElement('a');

    linkElement.appendChild(quickSearchElement);

    linkElement.id = quickSearchLink;

    entry.appendChild(linkElement);

    let menu = document.getElementById('materialize-menu-dropdown');

    menu.insertAdjacentElement('beforeend', entry);

    // register focus hotkey

    document.addEventListener('keypress', event => handleSearchForShiftF(event));

    // additionally, the last dropdown ul has a "right: 0px" style, which has to be fixed with auto, otherwhise it will pop up in the wrong position

    (Array.from(menu.querySelectorAll('ul.dropdown')).slice(-1)[0] as HTMLElement).style.right = 'auto';

}

function handleQuickSearch(event: KeyboardEvent): void {

    if (event.key === 'Enter') {

        let quickSearchElement = document.getElementById(quickSearchID) as HTMLInputElement;

        let linkElement = document.getElementById(quickSearchLink) as HTMLAnchorElement;

        let url = new URL(window.location.origin)

        url.pathname = '/search';

        url.searchParams.append('q', quickSearchElement.value);

        // clicking the link; we are not setting window.location because this will trigger a complete reload of the site

        linkElement.href = `${url.pathname}${url.search}`;

        linkElement.click();

        // clean up afterwards

        linkElement.removeAttribute('href');

        quickSearchElement.value = '';

    }

}

function handleSearchForShiftF(event: KeyboardEvent): void {

    if (helper.isShiftPressed) {

        // check if some kind of input is focused already; we then prevent our hotkey

        if (document.activeElement instanceof HTMLInputElement || document.activeElement instanceof HTMLTextAreaElement || ((document.activeElement as HTMLElement)?.isContentEditable ?? false)) {

            return;

        }

        if (event.code === 'KeyF') {

            event.preventDefault();

            document.getElementById(quickSearchID).focus();

        }

    }